import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux'
import style from './style.module.css'
import { Tabs, Select, Table, Tag, Space, Switch, Button, Modal, Breadcrumb } from 'antd';
import axios from 'axios'

const BargainList = (props) => {
    const [data, setData] = useState([])
    //获取数据
    useEffect(() => {
        axios({
            url: '/api/bargain',
            method: 'get'
        }).then(res => {
            // console.log(res,'111');
            setData(res.data.data)
        })
    }, []);
    //删除数据
    const handleDelete = (id) => {
        axios({
            url: `/api/bargainDel/${id}`,
            method: 'delete'
        }).then(res => {
            // setData(res.data.data)
            console.log(res, "123")
        })
    }
    //筛选数据
    const { Option } = Select;
    const { TabPane } = Tabs;
    const handleoption = (status) => {
        console.log(status);
        if (status === "1") {
            status = 0
        } else {
            status = 1
        }
        axios({
            url: '/api/bargain',
            method: 'get',
            params: {
                status
            }
        }).then(res => {
            setData(res.data.data)
        })
    }
    //点击查看详情
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [arrList, setarr] = useState("")
    console.log(arrList, '66');
    //打开弹框
    const showModal = (record) => {
        setIsModalVisible(true);
        console.log(record, 'record');
        setarr(record.id)
    }
    //点击确定
    const handleOk = () => {
        //关闭弹框
        setIsModalVisible(false)
    }
    //点击取消
    const handleCancel = () => {
        //关闭弹框
        setIsModalVisible(false)
    }
    // table表格
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            render: text => <a>{text}</a>,
        },
        {
            title: '砍价图片',
            dataIndex: 'img',
            key: 'img',
            render: img => <img src={img}></img>,
        },
        {
            title: '砍价名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '砍价简介',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '状态',
            key: 'status',
            dataIndex: 'status',
            render(status) {
                return status === 1 ? '进行中' : '已结束'
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    {
                        record.status === 1 ? <a onClick={() => { showModal(record) }}>查看详情</a> : <a onClick={() => handleDelete(record.id)}>删除</a>
                    }

                </Space>
            ),
        },
    ];
    //模拟砍价人员数据
    const arr = [
        {
            ID: 6,
            img: "https://img0.baidu.com/it/u=1312646863,1060383131&fm=26&fmt=auto",
            name: "唔西迪西",
            price: 12345,
            time: "2021-09-09"
        },
        {
            ID: 7,
            img: "https://img2.baidu.com/it/u=2108319215,1494231136&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=690",
            name: "玛卡巴卡",
            price: 16789,
            time: "2021-09-09"
        },
        {
            ID: 8,
            img: "https://img0.baidu.com/it/u=1312646863,1060383131&fm=26&fmt=auto",
            name: "巴拉巴拉",
            price: 123423,
            time: "2021-09-09"
        }
    ]
    //遍历ID
    let arrData = arr.filter(item => {
        return item.ID === arrList
    })
    console.log(arrData, 'arrData');
    // console.log(arr[0], '1234');
    return (
        <div className={style.bargainList}>
            {/* 面包屑 */}
            <div className={style.bargainTop}>
                <Breadcrumb separator=">">
                    <Breadcrumb.Item>主页</Breadcrumb.Item>
                    <Breadcrumb.Item >营销</Breadcrumb.Item>
                    <Breadcrumb.Item >砍价管理</Breadcrumb.Item>
                    <Breadcrumb.Item>砍价列表</Breadcrumb.Item>
                </Breadcrumb>
            </div>
            <div className={style.bargainMain}>
                
                <div className={style.bargainMain2}>
                    <span>砍价状态: </span>
                    <Select
                        style={{ width: 200 }}
                        onChange={handleoption}
                    >
                        <Option value="0">进行中</Option>
                        <Option value="1">已结束</Option>
                    </Select>
                </div>
            </div>
            <div className={style.bargainFooter}>
                <Table columns={columns} rowKey="id" dataSource={data} scroll={{ y: 460 }} />
            </div>
            <Modal title="查看详情" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <table border="0" className={style.table}>
                    <thead>
                        <tr>
                            <th>用户ID</th>
                            <th>用户头像</th>
                            <th>用户名称</th>
                            <th>砍价金额</th>
                            <th>砍价时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            {
                                arrData.map(item => {
                                    return <>
                                        <td>
                                            <span>{item.ID}</span>
                                        </td>
                                        <td>
                                            <span><img src={item.img} alt="" /></span>
                                        </td>
                                        <td><span>{item.name}</span></td>
                                        <td><span>{item.price}</span></td>
                                        <td><span>{item.time}</span></td>
                                    </>
                                })
                            }

                        </tr>

                    </tbody>

                </table>
            </Modal>
        </div>
    );
}
export default connect((state) => {
    return {
    }
})(BargainList);
